<template>
    <div>
        <Breadcrumb :route="route.matched" />
    </div>
    <div class="wb-container">
        <div class="mian-content">
            <div class="headerBtn">
                <el-button type="primary" @click="handleReload">
                    <el-icon>
                        <Loading />
                    </el-icon>
                </el-button>
                <el-button type="primary" @click="router.go(-1)">返回设备列表页</el-button>
            </div>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <!-- 设备详情 -->
                <el-tab-pane label="设备详情" name="first">
                    <div class="modal-body">
                        <div class="form-group">
                            <el-form ref="ruleFormRef" :model="list.DetaliList" class="demo-ruleForm" label-width="120px">
                                <el-form-item label="设备名称：" prop="name">
                                    <el-input v-model="list.DetaliList.name" placehloder="设备名称" />
                                </el-form-item>
                                <el-form-item label="称重板序号：" prop="imei">
                                    <el-input v-model="list.DetaliList.imei" placehloder="称重板序号" />
                                </el-form-item>
                                <el-form-item label="安卓板序号：" prop="android_imei">
                                    <el-input v-model="list.DetaliList.android_imei" placehloder="安卓板序号" />
                                </el-form-item>
                                <el-form-item label="地址：" prop="address">
                                    <el-input v-model="list.DetaliList.address" placehloder="设备状态" />
                                </el-form-item>
                                <el-form-item label="类型：" prop="address">
                                    <el-tag v-if="list.DetaliList.type === 1">称重板</el-tag>
                                    <el-tag v-else-if="list.DetaliList.type === 2">称重板/视觉板</el-tag>
                                    <el-tag v-else-if="list.DetaliList.type === 3">视觉板</el-tag>
                                </el-form-item>
                                <el-form-item label="总线：" prop="channel">
                                    <el-input v-model="list.DetaliList.channel" placehloder="设备总线" s />
                                </el-form-item>
                                <el-form-item label="经度：" prop="lat">
                                    <el-input v-model="list.DetaliList.lat" placehloder="经度" />
                                </el-form-item>
                                <el-form-item label="纬度：" prop="lng">
                                    <el-input v-model="list.DetaliList.lng" placehloder="纬度" />
                                </el-form-item>
                                <el-form-item label="信号强度：" prop="rssi">
                                    <el-input v-model="list.DetaliList.rssi" placehloder="信号强度" />
                                </el-form-item>
                                <el-form-item label="流量卡卡号：" prop="sim">
                                    <el-input v-model="list.phone" placehloder="流量卡卡号" />
                                    <!-- <el-input v-model="list.sim?.phone" placehloder="流量卡卡号" /> -->
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-tab-pane>
                <!-- 门锁管理 -->
                <el-tab-pane label="门锁管理" name="fourth">
                    <div class="lock-page">
                        <div class="lock-table">
                            <el-table v-loading="loading" element-loading-text="加载数据..." :data="lockCode"
                                style="width: 100%" border
                                :header-cell-style="{ background: '#44abf7', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }">
                                <template #empty>
                                    <el-empty description="暂无数据！" />
                                </template>
                                <el-table-column prop="name" label="名称" align='center' width="220" fixed />
                                <el-table-column prop="enabled" label="是否禁用" align='center' width="200">
                                    <template #default="{ row }">
                                        <el-tag v-if="row.enabled == 2">禁用</el-tag>
                                        <el-tag v-if="row.enabled == 1">未禁用</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="当前动作" align='center' width="200">
                                    <template #default="{ row }">
                                        <span v-if="row.status === 1">空闲</span>
                                        <span v-if="row.status === 2">补货中</span>
                                        <span v-if="row.status === 3">购物</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="是否打开" align='center' width="200">
                                    <template #default="scope">
                                        <div v-if="scope.row.status === 2 || scope.row.status === 3">
                                            <el-tag type="info">开启</el-tag>
                                            <button class="lockBtn" @click="openClick(scope.row)">关闭门锁</button>
                                        </div>

                                        <el-tag type="info" v-if="scope.row.status === 1">关闭</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="qr_code" label="二维码" align='center' width="360">
                                    <template #default="scope">
                                        <el-image style="width: 100px; height: 100px"
                                            :src="developBaseUrl + scope.row.qr_code" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align='center' min-width="300" fixed="right">
                                    <template #default="{ row }">
                                        <el-button type="success" class="btn-radius" @click="getGoods(row)"
                                            v-if="isWeigh">查看商品</el-button>
                                        <el-button type="primary" class="btn-radius" v-if="row.status == 1"
                                            @click="openDoorClcik(row)">补货开门</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="设备管理" name="second">
                    <div class="fromPage">
                        <div class="deviceOperate">设备状态：
                            <div><el-switch v-model="deviceList.deviceState" size="large" /></div>
                        </div>
                        <div class="deviceOperate">是否开机：
                            <div><el-switch v-model="deviceList.device0pen" size="large" /></div>
                        </div>
                        <div class="deviceOperate">设备音量：
                            <div>
                                <el-input-number v-model="deviceList.MediaVolume" size="small" :min="0" :max="100" />
                            </div>
                            <span>调整设备提示音和广告音量</span>
                        </div>
                        <div class="editBtn">
                            <el-button @click="editDevice">修改</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import {
    ElButton,
    ElTag,
    ElMessage,
    ElInput,
} from 'element-plus'
import { ElTable } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { DeviceDetali, DeviceLock, setOpenDoor, editDeviceLock } from '@/api/Device'
import { developBaseUrl } from '@/api/public'
import Breadcrumb from "@/components/nav-header";

const route = useRoute()
const router = useRouter()
//设备的ID
const courseId = ref()
//门锁的id
const lockID = ref()
//设备详情的数据
const list = reactive({
    DetaliList: [],
    phone: ''
})
const loading = ref(true)
//路由传过来的id
const historyParam = history.state.id;
courseId.value = historyParam
//获取详情数据
const deviceDetaliData = async () => {
    const res = await DeviceDetali(courseId.value).then(r => {
        const { code, data } = r
        if (code == 200) {
            console.log(data, '详情数据');
            list.DetaliList = data
            if (list.DetaliList.sim != null) {
                list.phone = data.sim.phone
            } else {
                list.phone = ''
            }
            if (list.DetaliList.type == 3) {
                isWeigh.value = false
            }
        }
    })
}
//设备的门锁管理
//门锁的数据
const lockList = ref()
const lockCode = ref()
const isWeigh = ref(true)
const now = new Date()

const activeName = ref('first')

//设备管理
const deviceList = reactive({
    deviceState: true,
    device0pen: true,
    MediaVolume: 0
})

//获取门锁的数据
const getLockList = async () => {
    const data = await DeviceLock({ device_id: courseId.value }).then(r => {
        const { code, data } = r
        if (code == 200) {
            loading.value = false
            lockList.value = data
            lockCode.value = lockList.value.map(item => {
                item.qr_code = item.qr_code.slice(7)
                return item

            })
        }

    }).catch((err) => {
        loading.value = false
    })
}
const getGoods = (row) => {
    lockID.value = row.id
    let params = {
        device_id: courseId.value,
        device_lock_id: lockID.value
    }
    router.push({
        name: 'deviceGoods',
        state: { params }
    })
}
onMounted(() => {
    deviceDetaliData()
})
const handleClick = async (tab, event) => {
    switch (tab.index) {
        case '0':
            deviceDetaliData()
            break;
        case '1':
            getLockList()
            break;
        // case '2':
        //     getLockList()
    }
}
const openDoorClcik = async (row) => {
    const open = await setOpenDoor({
        device_id: row.device_id,
        lock_id: row.number
    }).then(s => {
        const { code, data } = s
        if (code == 200) {
            ElMessage.success('开门成功')
            getLockList()
        }
    })
}
//改变门锁的开启状态
const openClick = async (row) => {
    const deviceLockIsOpen = await editDeviceLock(row.id, {
        status: 1
    }).then(res => {
        const { code, data } = res
        if (code == 200) {
            ElMessage.success('关锁成功')
            getLockList()
        }
    })
}
//温控 
const value1 = ref('')
const value2 = ref('')
const tableData = reactive({
    data: [
        {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            num: 0
        },
    ]
})
const onAddItem = () => {
    now.setDate(now.getDate() + 1)
    tableData.data.push({
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        num: 0
    },)
}
const handleReload = () => {
    deviceDetaliData()
    getLockList()
}
const editDevice = () => {
    console.log(deviceList, '改变设备数据');
}
</script>

<style lang="less" scoped>
.headerBtn {
    padding: 10px 0 10px 20px;
}

.demo-tabs {
    margin-top: 10px;
    padding: 0 20px;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.detali-page {
    padding: 20px 30px;
    background-color: #fff;
    height: 750px;
}

.modal-body {
    padding: 30px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 600px;

    .form-group {
        margin-right: -15px;
        margin-left: 20px;
        display: flex;
        align-items: baseline;

        .control-label {
            color: #000;
            font-weight: normal;
            font-size: 14px;
            padding-right: 10px;
            padding-left: 10px;
            position: relative;
            width: 140px;
        }
    }

    .form-control-static {
        min-height: 34px;
        font-size: 14px;
        padding-top: 7px;
        padding-bottom: 7px;
        margin-bottom: 0;
    }
}

.table-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}

.fromPage {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .deviceOperate {
        display: flex;
        justify-content: center;
        align-items: baseline;
        margin-bottom: 10px;
        letter-spacing: 1px;
        font-family: "Mastere";
        font-size: 14px;
        font-weight: bold;

        div {
            margin-left: 10px;

        }

        span {
            margin-left: 20px;
            font-size: 14px;
            color: #999;
            font-weight: normal;
        }
    }

    .editBtn {
        margin: 20px 0 0 20px;

        .el-button {
            padding: 2px 20px;
            background-color: #409eff;
            color: #ffffff;
            letter-spacing: 2px;
            font-size: 14px;
        }
    }
}

.btn-box {
    width: 700px;
    text-align: center;
}

.btn {
    outline: none !important;
    padding: 8px 16px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 10;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    border: 1px solid transparent;
}

.addBox {
    margin-top: 20px;
}

.addItemBtn {
    background: #ffc000 !important;
    border-color: #ffc000 !important;
    color: #fff !important;
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

.commodity-page {
    padding: 20px 0;
}

.fa-refresh:before {
    content: "\f021";
}

.el-tabs__content {
    width: 100%;
    padding: 20px;
}

.code {
    width: 200px;
    height: 200px;
    background-color: #44abf7;
}

.lockBtn {
    padding: 10px;
    margin-left: 20px;
    background-color: #44abf7;
    color: #fff;
    border-radius: 5px;
}

.secondDate {
    display: flex;

    text {
        margin: 0 4px;
    }
}

.secondInp {
    display: flex;
    justify-content: center;

    .el-input {
        width: 100px;
    }

}

:deep(.el-input__wrapper) {
    width: 600px;
}

:deep(.el-button) {
    padding: 2px 10px;
    font-size: 12px;
    letter-spacing: 2px;
}

:deep(.el-form-item__label) {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
}

:deep(.el-input__inner) {
    font-size: 14px;
}

:deep(.el-switch--large .el-switch__core) {
    min-width: 40px;
}
</style>
